<template>
  <div style="display: inline-block;">
    <el-button type="primary" @click="dialogTableVisible = true">修改</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="修改" width="970px" @close="close">
      <el-form ref="row_data" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">
        <el-form-item v-if="row_data.is_sup_admin !== 1" :label="'用户名'" prop="username">
          <el-input v-model="row_data.username" :disabled="undisabled" placeholder="用户名"/>
        </el-form-item>
        <el-form-item v-if="row_data.is_sup_admin !== 1" :label="'管理员权限'" prop="shop_name">
          <el-select
            v-model="row_data.shop_name"
            class="filter-item"
            placeholder="请选择"
            clearable
            style="width: 100%">
            <el-option
              v-for="item in shop_role"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="'昵称'" prop="nickname">
          <el-input v-model="row_data.nickname" placeholder="昵称"/>
        </el-form-item>
        <el-form-item :label="'手机号码'" prop="phone">
          <el-input v-model="row_data.phone" :disabled="undisabled" placeholder="手机号码"/>
        </el-form-item>
        <el-form-item :label="'头像'" prop="head_img">
          <!--<el-alert-->
          <!--title="建议图片长宽比为1:1"-->
          <!--type="warning"-->
          <!--show-icon-->
          <!--close-text="知道了"/>-->
          <el-upload
            :show-file-list="false"
            :on-success="imgSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadImg"
            :multiple="false"
            action=""
            class="avatar-uploader">
            <img v-if="row_data.head_img" :src="row_data.head_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">编辑</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import store from '@/store'
import { edit } from '@/api/user/admin_user'
import { client } from '@/utils/alioss'
import { getShopRoleList } from '@/api/shop_admin_auth/shopRole'

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      undisabled: true,
      shop_role: []
    }
  },
  created: function() {
    this.get_shop_role_list()
  },
  methods: {
    get_shop_role_list() {
      getShopRoleList(store.getters.token).then(res => {
        this.shop_role = res.data.list.data
      })
    },
    uploadImg(file) {
      console.log(file)
      const that = this
      var fileName = 'img' + file.file.uid
      client().put(fileName, file.file).then((result) => {
        that.row_data.head_img = result.url
        that.img = result.url
      }).catch((err) => {
        this.$message.error('图片上传失败，原因' + err)
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/gif')
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    imgSuccess(res, file) {
      this.row_data.head_img = res.url
      // console.log(this.row_data.main_img)
    },
    submitForm() {
      edit(store.getters.token, this.row_data).then(res => {
        if (res.data.status === true) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.data.msg)
        }
        this.close()
      })
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
<style>
  .avatar{
    width: 180px;
    height: 180px;
    border-radius: 3%;
    /*margin-top: 10px;*/
  }
  .avatar-uploader{
    float: left;
    margin-top: 10px;
  }
</style>
